<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="exercise.js"></script>
    <style>
        .btn {
            width:40px;
            height: 25px;
        }
    </style>
</head>
<body>
<fieldset>
    <legend>第一题</legend>
    <div id="firstDiv"></div>
</fieldset>
<fieldset>
    <legend>第二题</legend>
    原字符串：<input id="secondInput" type="text">
    <button onclick="second()">转换</button><br>
    结果：<span id="secondSpan"></span>
</fieldset>
<fieldset>
    <legend>第三题</legend>
    鼠标坐标：<input id="thirdInput" type="text">
</fieldset>
<fieldset>
    <legend>第四题</legend>
    <div id="fourthDiv" >
        <br>
        <button onclick="fourth(1)">红</button><br><br>
        <button onclick="fourth(2)">蓝</button><br><br>
        <button onclick="fourth(3)">绿</button><br><br>
        <br>
    </div>
</fieldset>
<fieldset>
    <legend>第五题</legend>
    <form >
        姓名：<input id="fifthName" type="text"><br>
        年龄：<input id="fifthAge" type="text"><br>
        职业：<input id="fifthOccupation" type="text"><br>
        <button onclick="fifth()" type="button">提交</button>
    </form>
</fieldset>
<fieldset>
    <legend>第七题</legend>
   <table border="1">
        <tr style="height: 40px;" ><td colspan="3">计算器</td></tr>
        <tr>
            <td>第一个数</td>
            <td><input id="numberOne" type="number"></td>
            <td rowspan="3">
                <button onclick="compute(1)" class="btn">+</button><br>
                <button onclick="compute(2)" class="btn">-</button><br>
                <button onclick="compute(3)" class="btn">*</button><br>
                <button onclick="compute(4)" class="btn">/</button>
            </td>
        </tr>
        <tr>
            <td>第二个数</td>
            <td><input id="numberTwo" type="number"></td>
        </tr>
        <tr>
            <td>计算结果</td>
            <td><input id="numberResult" type="text"></td>
        </tr>
   </table>
</fieldset>


</body>
</html>